<template>
  <div>
    <div class="clearfix content-top">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="dialogShow()">添加顶级节点</el-button>
      <el-input placeholder="请输入节点名称进行过滤" v-model="sarch" class="pull-right el-input-middle" size="small"></el-input>
    </div>
    <!-- 树菜单 -->
    <div class="block" >
      <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion :filter-node-method="filterNode" ref="menuTree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :class="!data.edit ? 'tree-name-color' : ''">{{ node.label }}</span>
          <span class="optionBtn">
            <el-button circle icon="el-icon-plus" size="mini" type="success" @click="dialogShow(node,data,'insert')"></el-button>
            <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="dialogShow(node, data,'update')"></el-button>
            <el-button circle icon="el-icon-delete" size="mini" type="warning" @click="remove(node, data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <!-- 详情框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="700px">
      <el-form label-position="right" label-width="100px" :model="menuData">
          <el-form-item label="父级ID">
              <el-input v-model="menuData.parentId" disabled></el-input>
          </el-form-item>
          <el-form-item label="资源名称">
              <el-input v-model="menuData.name"></el-input>
          </el-form-item>
          <el-form-item label="资源URL">
              <el-input v-model="menuData.url"></el-input>
          </el-form-item>
          <el-form-item label="资源路径">
              <el-input v-model="menuData.path"></el-input>
          </el-form-item>
          <el-form-item label="资源图标">
              <el-input v-model="menuData.iconCls"></el-input>
          </el-form-item>
          <el-form-item label="资源类型">
              <el-select v-model="menuData.srcType">
                  <el-option label="菜单" value="1"></el-option>
                  <el-option label="资源" value="2"></el-option>
              </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from 'plugins/axios/api.js'
export default {
  data(){
    return {
      sarch:'',
      dataList:[],
      defaultProps:{
        children: 'children',
        label: 'name',
        id: 'id'
      },
      dialog:{
        title:'',
        isShow:false
      },
      menuData:{}
    }
  },
  created() {
    this.getData();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  watch:{
    sarch(val){
      this.$refs.menuTree.filter(val);
    }
  },
  methods:{
    getData(){
      let self = this;
      api.menuNodeAll().then(res=>{
        self.dataList = res.content.children;
      })
    },
    filterNode(value, data){
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    dialogShow(node,data,type){/**添加节点 */
      let self = this;
      self.menuData={
        id: '',
        parentId:0,
        name: '',
        url: '',
        path: '',
        srcType: '',
        iconCls: ''
      };
      if(type==='insert'){
        self.dialog.title ='新增节点';
        self.menuData.parentId=data.id;
      }else if (type==='update'){
         self.dialog.title ='编辑节点';
         self.menuData = {
            id: data.id,
            name:data.name,
            parentId:data.parentId,
            url:data.url,
            path: data.url,
            srcType:String(data.srcType),
            iconCls:data.iconCls
         }
      }else{
        self.dialog.title ='新增顶级节点';
      }
      self.dialog.isShow = true;
    },
    remove(node,data){
      let self = this;
      self.$confirm('确认删除吗?', '提示', {
          confirmButtonClass: 'el-button--warning'
      }).then(() => {
          api.deleteMenu(data.id).then(res=>{
            self.getData();
            self.$message.success(res.desc)
          })
      }).catch(() => {
      });
    },
    submitDialog(){
      let self = this;
      let type =  self.dialog.title.indexOf('新增')>-1?'addMenu':'editMenu';
      api.addUpdateMenu(type,self.menuData).then(res=>{
        self.dialog.isShow= false;
        self.getData();
        self.$message.success(res.desc)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.content-top
  margin-bottom 16px
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px
  >span:first-child
    margin 0 40px 0 0
  >span:nth-child(2)
    display none
  &:hover>span:nth-child(2)
    display inline-block
</style>


